import React, { useState } from 'react';
import styles from './style.less';
import { Button, Modal } from 'antd';
import { PayCircleOutlined, ShopOutlined } from '@ant-design/icons';
import { useHistory, useParams, history } from 'umi';
import { Buy_Book, Get_Book_ById } from '@/services/api';

const sourcetest = {
  accomplish_time: '',
  book_author: '',
  book_degree: '',
  book_description: '',
  book_id: '',
  book_image: '',
  book_name: '',
  book_price: 0.0,
  book_publisher: '',
  book_status: '',
  book_type: '',
  buyer_id: '',
  post_time: '',
  seller_id: '',
  trade_time: '',
};

function BookDetail() {
  const [bookItem, setBook] = useState(sourcetest);
  const [isModalVisible, setVisible] = useState(false);

  const location: any = useHistory().location;
  const user_id = location.query.user_id;

  const params: any = useParams();

  if (bookItem === sourcetest) {
    try {
      Get_Book_ById(params.id).then(res => {
        console.log(res);
        setBook(res);
      });
    } catch (error) {
      console.log(error);
    }
  }

  let base64 = '';
  let showimg = <img className={styles.bookimg} src="" alt="" />;
  if (bookItem != sourcetest) {
    base64 = JSON.parse(bookItem.book_image).book_image;
    showimg = <img className={styles.bookimg} src={base64} alt="" />;
  }

  function handlebuy() {
    if (bookItem.seller_id === user_id) {
      setVisible(true);
    } else {
      try {
        Buy_Book(bookItem.book_id, user_id).then(() => {
          history.push(`/mycenter/${user_id}`);
        });
      } catch (error) {
        console.log(error);
      }
    }
  }
  console.log(user_id);

  function handleOk() {
    setVisible(false);
  }
  return (
    <div className={styles.outer}>
      <Modal
        title="提示"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleOk}
      >
        <div className={styles.modal}>
          <h3>你不可以买自己发布的书</h3>
        </div>
      </Modal>
      <div className={styles.main}>
        <div className={styles.picture}>{showimg}</div>

        <div className={styles.detailblock}>
          <div className={styles.rowname}>
            <p className={styles.bookname}>{bookItem.book_name}</p>
            <div className={styles.rowdegree}>
              <h3 className={styles.degreelabel}>新旧程度：</h3>
              <p className={styles.degree}>{bookItem.book_degree}</p>
            </div>
          </div>
          <div>
            <p className={styles.publisher}>{bookItem.book_publisher}</p>
          </div>
          <div>
            <p className={styles.description}>{bookItem.book_description}</p>
          </div>
          <div className={styles.rowprice}>
            <p className={styles.price}>￥{bookItem.book_price}</p>
            <p className={styles.type}>{bookItem.book_type}</p>
          </div>
          <p className={styles.time}>上架时间：{bookItem.post_time}</p>
          <Button className={styles.buy} onClick={handlebuy}>
            <ShopOutlined />
            立即购买
            <PayCircleOutlined />
          </Button>
        </div>
      </div>
    </div>
  );
}

export default BookDetail;
